<template>
    <div class="login-container">
        <div class="login-form">
            <div class="form-container">
                <p class="title">易达数字化智能化档案管理系统</p>
                <br>
                <el-form ref="loginFormRef" :rules="rules" :model="loginForm" @keyup.enter="handleLogin">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" show-password :prefix-icon="Lock" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <div class="form-btn">
                    <el-button type="primary" :loading="loadbtn" @click="handleLogin">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Lock, User } from '@element-plus/icons-vue'
import { Login } from '@/api/user';
import { MD5 } from 'crypto-js'
import { ElMessage } from 'element-plus';
import { TOKEN } from '@/pinia/modules/app' // TOKEN变量名
import router from '../../router';

const loginForm = ref({
    username: '',
    password: ''
})
const loadbtn = ref(false)
const loginFormRef = ref(null);
// 登录表单校验规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
}
// 登录表单提交
const handleLogin = () => {
    loginFormRef.value.validate(async (valid) => {
        if (valid) {
            loadbtn.value = true;
            const res = await Login({
                userName: loginForm.value.username,
                password: MD5(loginForm.value.password).toString()
            })
            loadbtn.value = false;
            if(res.errorCode == 0){
                localStorage.setItem(TOKEN, res.data);
                ElMessage({
                    type: 'success',
                    message: '登录成功'
                });
                router.push({
                    path: '/'
                });
            }
        }       
    })
}
</script>

<style scoped lang="scss">
:root {
  --el-input-height: 40px !important;
}
.login-container{
    width: 100%;
    height: 100%;
    background:url("@/assets/images/login-bg.png") no-repeat;
    background-size: cover;
    background-position: 20% 0;
    .login-form{
        float: right;
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .form-container{
            background: #fff;
            max-width: 400px;
            min-width: 300px;
            width: 40%;
            margin-right: 5%;
            border-radius: 12px;
            padding: 20px 30px;
            .title{
                font-size: 26px;
                font-weight: bold;
                text-align: center;
            }
            :deep(.el-form){
                margin: 30px 0;
                .el-form-item+.el-form-item{
                    // margin-top: 35px;
                }
                .el-input__inner{
                    // height: 40px;
                    --el-input-inner-height: 40px;
                }
            }
            .form-btn{
                text-align: center;
                .el-button{
                    width: 100%;
                    height: 40px;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>